<template>
    <el-dialog :model-value="visible" :title="isEdit[1]" width="500" @closed="close">
        <el-form ref="formRef" :model="editForm" label-position="top" :rules="rules">
            <el-form-item :label="TableLabel.Name + ': '" prop="Name">
                <el-input v-model.trim="editForm.Name" :placeholder="'请输入' + TableLabel.Name" clearable></el-input>
            </el-form-item>
            <el-form-item :label="TableLabel.Code + ': '" prop="Code">
                <el-input v-model.trim="editForm.Code" :placeholder="'请输入' + TableLabel.Code" clearable></el-input>
            </el-form-item>
            <el-form-item :label="TableLabel.CookParams + ': '">
                <el-input v-model.trim="editForm.CookParams" :placeholder="'请输入' + TableLabel.CookParams"
                    clearable></el-input>
            </el-form-item>
        </el-form>

        <template #footer>
            <el-button @click="emit('update:visible', false)">取消</el-button>
            <el-button type="primary" @click="Submit" :loading="loading">提交</el-button>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import { computed, ref, watch } from "vue";
import { TableLabel } from "./ConfigData"
import * as types from "./types"
import { DishesListApi } from "@/api/dishes_manager/dishes_list"
import { FormInstance, FormRules } from "element-plus";
import MessageUti from "@/library/utils/MessageUti"

const props = defineProps<{
    visible: types.EditDialogType['visible']
    editForm: types.EditDialogType['editForm']
}>()

watch(() => props.editForm, (val) => {
    editForm.value = { ...val }
})

const emit = defineEmits<{
    (e: 'submitSuccess'): void
    (e: "update:visible", visible: boolean): void
}>()

const initForm: types.EditDialogType['editForm'] = {}
const editForm = ref({ ...initForm })
const formRef = ref<FormInstance>()
const rules: FormRules = {
    Name: { required: true, message: "请输入" + TableLabel.Name, trigger: "blur" },
    Code: { required: true, message: "请输入" + TableLabel.Code, trigger: "blur" },
}

const isEdit = computed<[boolean, string]>(() => {
    const isTrue = editForm.value.Id !== undefined
    const message = isTrue ? '编辑' : "新增"

    return [isTrue, message]
})

const loading = ref(false)
const Submit = async () => {
    const valid = await formRef.value?.validate(() => { })
    if (!valid) { return }

    loading.value = true
    const useApi = isEdit.value[0] ? DishesListApi.Update : DishesListApi.Insert;
    const params = {
        ...editForm.value,
        CookParams: editForm.value.CookParams || "{}"
    } as any

    try {
        await useApi(params)
        emit("submitSuccess")
        emit("update:visible", false)
        MessageUti.showSuccess((isEdit.value[1]) + "成功")
    }
    catch (error) { }
    finally {
        loading.value = false
    }
}

const close = () => {
    emit('update:visible', false)
    editForm.value = { ...initForm }
    formRef.value?.resetFields()
}

</script>

<style scoped></style>